import React, { Component } from 'react';
import { message } from 'antd';

class Color extends Component {
	
	state = {
		color: ''
	}
	
	selectColor = () => {
		this.changeColor(this.inputColor.value);
	}
	
	//修改主题色
	changeColor = (color) => {
		window.less.modifyVars(
			{
				'@primary-color': color,
				'@link-color': color,
				'@btn-primary-bg': color,
			}
		).then(() => { 
			message.success("设置主题色成功");
			this.setState({color});
			localStorage.setItem("color", color);
		}).catch(error => {
			message.error("设置主题色失败");
		});
	}
	
	componentDidMount(){
		let color = localStorage.getItem("color");
		if(color){
			this.setState({color});
		}
	}
	
	render(){
		return <input 
			ref={(input)=>this.inputColor = input}
			type="color" 
			value={this.state.color} 
			onChange={this.selectColor}
			style={{width: '100%'}}
		/>
	}
}

export default Color;